import styles from './LoadingAnimate.module.scss'

const LoadingAnimate = defineComponent({
  props: {
    barNumber: {
      type: Number,
      default: 4,
    },
    space: {
      type: Number,
      default: 1,
    },
    color: {
      type: String,
      default: '#177ddc',
    },
    speed: {
      type: Number,
      default: 2,
    },
  },
  setup(props) {
    return () => (
      <div class={styles.container}>
        {Array(props.barNumber)
          .fill(0)
          .map((item, index) => {
            ;<div
              class={styles.item}
              style={{
                animationDelay: index * 0.2 + 's',
                background: props.color,
                animationDuration: props.speed + 's',
                margin: `0 ${props.space}px`,
              }}></div>
          })}
      </div>
    )
  },
})

export default LoadingAnimate
